<template>
  <div class="page">
    <!-- 顶部汇总数据 -->
    <div class="top">
      <table>
        <tr>
          <th>总拨出</th>
          <th>打赏金额</th>
          <th>商家实付总额</th>
          <th>绿色积分总额</th>
          <th>商家支付通证总额</th>
        </tr>
        <tr>
          <td>{{ totalvalue.totalAllmoney }}</td>
          <td>{{ totalvalue.allmoney }}</td>
          <td>{{ actually }}</td>
          <td>{{ totalvalue.cash }}</td>
          <td>{{ totalvalue.gtfy }}</td>
        </tr>
      </table>
    </div>

    <el-form :inline="true">
      <el-form-item label="用户ID"> 
        <el-input v-model="query.uid" placeholder="请输入用户ID"></el-input>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="query.type" placeholder="请输入查询类型">
          <el-option label="SZX" value="SZX"></el-option>
          <el-option label="XYZ" value="XYZ"></el-option>
          <el-option label="XYZ提现成功" value="XYZ提现成功"></el-option>
          <el-option label="XYZ提现失败" value="XYZ提现失败"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryMethod">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="list" border>
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="昵称" prop="name"></el-table-column>
      <el-table-column label="用户ID" prop="uid"></el-table-column>
      <el-table-column label="类型" prop="type"></el-table-column>
      <el-table-column label="收支类型" prop="inOut"></el-table-column>
      <el-table-column label="金额" prop="amount"></el-table-column>
      <el-table-column label="余额" prop="balance"></el-table-column>
      <el-table-column label="详情" prop="detailed"></el-table-column>
      <el-table-column label="备注" prop="remark"></el-table-column>
      <el-table-column label="创建时间" prop="createTime"></el-table-column>
    </el-table>

    <el-pagination
      background
      @current-change="handlePageChange"
      :current-page="query.pageNum"
      :page-size="query.pageSize"
      layout="total, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import { szxRecordList } from "../../../api/ds/newSystem";
import { rewardQureyList } from "@/api/ds/agent";
export default {
  components: {},
  props: {},
  data() {
    return {
      list: [],
      total: 0,
      query: {
        pageNum: 1,
        pageSize: 10,
        uid: null,
        type: null,
      },
      totalvalue: {
        totalAllmoney: 0,
        cash: 0,
        allmoney: 0,
        gtfy: 0,
      },
    };
  },
  computed: {
    actually() {
      return this.totalvalue.cash + this.totalvalue.gtfy;
    },
  },
  watch: {},
  created() {
    this.getData();
    this.initTotalData();
  },
  methods: {
    async initTotalData() {
      let res = await rewardQureyList();
      if (res.code === 200) {
        console.log(res);
        this.totalvalue.totalAllmoney = res.data.userReward2.allmoney || 0;
        this.totalvalue.allmoney = res.data.userReward1.allmoney || 0;
        this.totalvalue.cash = res.data.userReward1.cash || 0;
        this.totalvalue.gtfy = res.data.userReward1.gtfy || 0;
      }
    },

    async getData() {
      let res = await szxRecordList(this.query);
      console.log(res);
      if (res.code === 200) {
        this.list = res.rows;
        this.total = res.total;
      }
    },
    queryMethod() {
      this.query.pageNum = 1;
      this.getData();
    },
    handlePageChange(val) {
      this.query.pageNum = val;
      this.getData();
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  background-color: #ffffff;

  .top {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    padding: 10px 0;

    table {
      width: 100%;
      border: 1px solid lightgray;
      border-collapse: collapse;
    }

    tr {
      width: 100%;
    }

    tr th {
      width: 20%;
      border: 1px solid lightgray;
      text-align: center;
      height: 31px;
      line-height: 31px;
      background-color: #cccccc;
    }

    tr td {
      width: 20%;
      border: 1px solid lightgray;
      background-color: #ffffff;
      text-align: center;
      height: 30px;
      line-height: 30px;

      font-size: 20px;
      color: #ff0000;

      font-weight: 600;
    }
  }
}
</style>
